<template>
    <div class="app-container">
      <div class="head_search u-f u-f-ac u-fw">
        <!-- <div class="ipt_box u-f u-f-ac u-f-jsb">
          <p class="label font14 text_black">{{ $t("用户名") }}：</p>
          <el-input
            v-model="username"
            :placeholder="$t('请输入用户名')"
          ></el-input>
        </div> -->
        <!-- <div class="ipt_box u-f u-f-ac u-f-jsb">
          <p class="label font14 text_black">{{ $t("账户名") }}：</p>
          <el-input
            v-model="drawname"
            :placeholder="$t('请输入提现账户名字')"
          ></el-input>
        </div> -->
        <div class="date_box u-f u-f-ac">
          <p class="label font14 text_black">{{ $t("时间") }}：</p>
          <el-date-picker
            v-model="dates"
            type="datetimerange"
            :picker-options="pickerOptions"
            unlink-panels
            :range-separator="$t('至')"
            :start-placeholder="$t('开始日期')"
            :end-placeholder="$t('结束日期')"
            align="right"
            value-format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
          <!-- <p class="tip font14 text_danger">{{ $t("只能选择一个月的范围") }}</p> -->
        </div>
        <!-- <div class="select_box u-f u-f-ac u-f-jsb">
          <p class="label font14 text_black">{{ $t("打款方式") }}：</p>
          <el-select
            v-model="payMethVal"
            :placeholder="$t('请选择')"
            @change="payMethChange"
          >
            <el-option
              v-for="item in payMethArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div> -->
        <!-- <div class="select_box u-f u-f-ac u-f-jsb">
          <p class="label font14 text_black">{{ $t("状态") }}：</p>
          <el-select
            v-model="clientVal"
            :placeholder="$t('请选择')"
            @change="clientChange"
          >
            <el-option
              v-for="item in clientArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div> -->
        <button
          class="sub_btn font14 text_white bg_blue"
          @click="getData('search')"
        >
          {{ $t("提交") }}
        </button>
        <!-- <button class="export_btn font14 text_white bg_blue" @click="exportExcel">
          {{ $t("导出") }}
        </button> -->
      </div>
      <div class="head_options u-f u-f-ac u-fw">
        <button class="sub_btn font14 text_white bg_blue"  v-if="memusid == 5 || memusid == 6" @click="addCabinet">{{ $t("申请提现") }}</button>
      </div>
        <div>
            <el-table :data="tableData">
                <el-table-column
                prop="create_time"
                :label="$t('申请时间')"
                width="160"
                ></el-table-column>
                <el-table-column
                prop="withdrawal_amount"
                :label="$t('打款金额')"
                ></el-table-column>
                <!-- <el-table-column
                prop="service_amount"
                :label="$t('手续费')"
                ></el-table-column> -->
                <el-table-column
                prop="status"
                :label="$t('状态')"
                >
                  <template slot-scope="{row}">
                    <span class="font13 text_blue" v-if="row.status==1" >审核中</span>
                    <span class="font13 text_blue" v-if="row.status==2" >审核成功</span>
                    <span class="font13 text_blue" v-if="row.status==3" >审核失败</span>
                  </template>
              </el-table-column>
                <el-table-column
                prop="name"
                :label="$t('公司名称')"
                ></el-table-column>
                <el-table-column
                prop="bankname"
                :label="$t('银行')"
                ></el-table-column>
                <el-table-column
                prop="branch"
                :label="$t('分行')"
                ></el-table-column>
                <el-table-column
                prop="banknumber"
                :label="$t('银行账号')"
                >
                </el-table-column>
                <el-table-column
                prop="bills"
                :label="$t('发票凭证')"
                >
                <template slot-scope="{row}" v-if="row.bills!=''&&row.bills!=null">
                  <a href="#" @click="download1(row.bills)" >发票凭证</a>
                </template>
                </el-table-column>
                <el-table-column
                prop="remark"
                :label="$t('提现备注')"
                ></el-table-column>

                <el-table-column
                v-if="memusid != 5&&memusid != 6"
                prop="username"
                :label="$t('用户名')"
                ></el-table-column>
                <el-table-column
                prop="credential"
                :label="$t('打款凭证')"
                >
                <template slot-scope="{row}" v-if="row.credential!=''&&row.credential!=null">
                  <a href="#" @click="download1(row.credential)">打款凭证</a>
                </template>
                </el-table-column>
                <!-- <el-table-column :label="$t('操作')" width="180" fixed="right" v-if="memusid != 5&&memusid != 6">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="success"
                    @click="handleDetail(scope.row)"
                    >详情</el-button
                    >
                    <el-button
                    v-if="scope.row.status == 1"
                    size="mini"
                    type="primary"
                    @click="handleExamine(scope.row)"
                    >审核</el-button
                    >
                </template>
                </el-table-column> -->
            </el-table>

            <div class="pagination_box ">
                <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-size="page_size"
                layout="total, prev, pager, next, jumper"
                :total="total"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 添加提现信息 -->
    <el-dialog :title="$t('申请提现')" width="900px" :visible.sync="showAddCab"
      :close-on-click-modal="false">
      <span style="color: red;">剩余金额 : {{ balance }}</span>
      <!-- @close="agentType = 1" -->
      <div class="order_detail">
        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac" style="width: 15%;">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("打款金额") }}：</span>
          </p>
          <el-input v-model="detail_from.withdrawal_amount" :disabled="updateCab" :placeholder="$t('请输入打款金额')"></el-input>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac" style="width: 15%;">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("公司名称") }}：</span>
          </p>
          <el-input v-model="detail_from.name" :disabled="updateCab" :placeholder="$t('请输入真实姓名')"></el-input>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac" style="width: 15%;">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("银行") }}：</span>
          </p>
          <el-input v-model="detail_from.bankname" :disabled="updateCab" :placeholder="$t('请输入银行')"></el-input>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac" style="width: 15%;">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("银行账户") }}：</span>
          </p>
          <el-input v-model="detail_from.banknumber" :disabled="updateCab" :placeholder="$t('请输入银行账户')"></el-input>
        </div>
        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac" style="width: 15%;">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("分行") }}：</span>
          </p>
          <el-input v-model="detail_from.branch" :disabled="updateCab" :placeholder="$t('分行')"></el-input>
        </div>

        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac" style="width: 15%;">
            <span class="font14 text_danger" style="margin-right: 3px;">*</span>
            <span class="font14 text_black">{{ $t("发票凭证") }}：</span>
          </p>

          <div class="img_list">
              <div class="upload_img" v-if="adver_img1">
                <!-- <img :src="adver_img1" /> -->
                <a href="#" @click="download">发票凭证</a>
              </div>
              <el-upload action='https://cdb.workair.vip/operate/finance/fileUpload' :headers="{ token, ocode }"
                name="img_file" :limit="1" :on-exceed="handleAdvExceed1"
                :on-success="handleAdvSuccess1" :on-remove="handleAdvRemove" :on-error="handleAdvError">
                <el-button type="primary">{{ $t('选择文件') }}</el-button>
              </el-upload>

              <!-- <el-upload
                class="basic"
                name="img_file"
                action="https://cdb.workair.vip/finance/fileUpload"
                :data="{ type: 'image' }"
                :headers="{ token, ocode }"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload> -->
          </div>

          <!-- <el-input v-model="detail_from.bills" :disabled="updateCab" :placeholder="$t('上传票据')"></el-input> -->
        </div>

        <div class="ipt_list u-f u-f-ac">
          <p class="lable u-f u-f-ac" style="width: 15%;">
            <span class="font14 text_black">{{ $t("备注") }}：</span>
          </p>
          <el-input v-model="detail_from.remark" :placeholder="$t('请输入备注')" maxlength="18"></el-input>
        </div>
        <button class="sub_btn font14 text_white bg_blue" @click="addSubmit">{{ $t("提交")
        }}</button>
        <!-- <button class="sub_btn font14 text_white bg_blue" @click="addMoreSubmit" v-if="!updateCab && addMoreCab">{{
          $t("提交") }}</button>
        <button class="sub_btn font14 text_white bg_blue" @click="updateSubmit" v-if="updateCab">{{ $t("修改") }}</button> -->
      </div>
    </el-dialog>

    <!-- 审核 -->
    <el-dialog
      :title="$t('审核')"
      width="900px"
      :visible.sync="showExamine"
      :close-on-click-modal="false"
    >
      <div class="examine_detail">
        <div class="txt_list u-f u-f-ac">
          <p class="lable font14 text_black">{{ $t("提现时间") }}：</p>
          <span class="txt font14 text_black">{{
            examineFrom.create_time
          }}</span>
        </div>
        <div class="txt_list u-f u-f-ac">
          <p class="lable font14 text_danger">{{ $t("打款金额") }}：</p>
          <span class="txt font14 text_danger"
            >￥{{ examineFrom.withdrawal_amount }}</span
          >
        </div>
        <div class="txt_list u-f u-f-ac">
          <p class="lable font14 text_danger">{{ $t("公司名称") }}：</p>
          <span class="txt font14 text_danger"
            >{{ examineFrom.name }}</span
          >
        </div>
        <div class="txt_list u-f u-f-ac">
          <p class="lable font14 text_danger">{{ $t("银行") }}：</p>
          <span class="txt font14 text_danger"
            >{{ examineFrom.bankname }}</span
          >
        </div>

        <div class="txt_list u-f u-f-ac">
          <p class="lable font14 text_danger">{{ $t("银行账户") }}：</p>
          <span class="txt font14 text_danger"
            >{{ examineFrom.banknumber }}</span
          >
        </div>

        <div class="txt_list u-f u-f-ac">
          <p class="lable font14 text_danger">{{ $t("发票凭证") }}：</p>
          <span class="txt font14 text_danger"
            >{{ examineFrom.bills }}</span
          >
        </div>

        <div class="txt_list u-f u-f-ac">
          <p class="lable font14 text_danger">{{ $t("分行") }}：</p>
          <span class="txt font14 text_danger"
            >{{ examineFrom.branch }}</span
          >
        </div>
        
        <div class="txt_list u-f u-f-ac">
          <p class="lable font14 text_danger">{{ $t("备注") }}：</p>
          <span class="txt font14 text_danger"
            >{{ examineFrom.remark }}</span
          >
        </div>
<!-- 
        <div class="ipt_list u-f">
          <p class="lable font14 text_black">{{ $t("备注") }}：</p>
          <el-input
            v-model="examineFrom.remark"
            autosize
            type="textarea"
            :placeholder="$t('请输入')"
          ></el-input>
        </div> -->

        <div class="txt_list u-f u-f-ac">
            <div class="basic">
              <div class="img_list">
                <div class="upload_img" v-if="adver_img">
                  <img :src="adver_img" />
                </div>
                <el-upload action='https://cdb.workair.vip/operate/finance/fileUpload' :headers="{ token, ocode }"
                  name="img_file" :data="{ type: 'image' }" :file-list="adverFile" :limit="1" :on-exceed="handleAdvExceed"
                  :on-success="handleAdvSuccess" :on-remove="handleAdvRemove" :on-error="handleAdvError" list-type="picture">
                  <el-button type="primary">{{ $t('选择文件') }}</el-button>
                </el-upload>

                <!-- <el-upload
                  class="basic"
                  name="img_file"
                  action="https://cdb.workair.vip/finance/fileUpload"
                  :data="{ type: 'image' }"
                  :headers="{ token, ocode }"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList">
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload> -->
              </div>
              <!-- <el-button class="submit_btn" type="primary" @click="adv_submit">{{ $t('提交') }}</el-button> -->
            </div>
        </div>

        <div class="txt_list u-f u-f-ac">
          <p class="lable font14 text_black">{{ $t("状态") }}：</p>
          <el-radio-group v-model="examineFrom.status">
            <el-radio :label="2">{{ $t("打款") }}</el-radio>
            <el-radio :label="3">{{ $t("拒绝") }}</el-radio>
          </el-radio-group>
        </div>

        <el-button type="primary" @click="examineSubmit">{{ $t("提交") }}</el-button>

      </div>
    </el-dialog>

    </div>
</template>
<script>
import util from "@/assets/js/util.js";
import { mapState } from "vuex";
export default {
    name: "finance-withdrawalre",
    data() {
        let that = this;
        return {
            balance:0,
            reimg:'',
            dates: "",
            page:1,
            page_size:20,
            showAddCab :false,
            tableData: [],
            updateCab: false,
            page: 1,
            page_size: 20,
            total: 0,
            detail_from: {
              withdrawal_amount: '',
              name: '',
              bankname: '',
              banknumber: '',
              branch: '',
              remark: '',
              state: 1,
              uid: 0,
              bills: ''
            },
            showExamine: false,
            examineFrom: {
              id:0,
              withdrawal_amount: '',
              name: '',
              bankname: '',
              banknumber: '',
              remark: '',
              status: 0,
              state:0,
              uid:0,
              reimg: ''
            },
            adverFile: [],
            adverFile1: [],
            adver_img:'',
            adver_img1: '',
            pickerOptions: {
              shortcuts: [
                {
                  text: that.$t("最近一周"),
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit("pick", [start, end]);
                  },
                },
                {
                  text: that.$t("最近一个月"),
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit("pick", [start, end]);
                  },
                },
                {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setMonth(start.getMonth() - 3);
                    // start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                  }
                },
                {
                  text: '最近六个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setMonth(start.getMonth() - 6);
                    picker.$emit('pick', [start, end]);
                  }
                },
                {
                  text: '最近十二个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setMonth(start.getMonth() - 12);
                    // start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
                    picker.$emit('pick', [start, end]);
                  }
                },
              ],
            },
          }
    },
    mounted(){
      this.page = 1;
      this.page_size = 20;
      this.getData();

    },
    computed: {
      ...mapState(["permissions","token","memusid","uid","ocode"])
    },
    methods:{
      download1(val){
        console.log(val);
        window.open(val);
      },
      download(){
        window.open(this.adver_img1);
        // window.open(this.adver_img1, "_blank");
        // window.location.href = this.adver_img1;
      },
      exportExcel() {
        this.is_export = 1
        this.getData()
      },
      adv_submit() {
        util
          .$http("/set/save", {
            type: "order_adv",
            image: this.adver_id,
            second: this.adver_second
          })
          .then(res => {
            if (res.code == 1) {
              this.$message({
                message: res.msg,
                type: "success"
              });
            }
          });
      },
      handleAdvRemove() {
        this.adver_id = "";
        this.adver_img = "";
        this.adver_img1 = "";
      },
      handleAdvError(err) {
        console.log("打印一下怎么个事！")
        console.log(err);
        this.$message({
          message: this.$t("上传失败"),
          type: "warning"
        });
      },
      handleAdvSuccess(response, file) {
        console.log("打印成功了奥");
        console.log(response);
        console.log(file);
        this.adver_id = response.msg;
        this.adver_img = response.path;
        
      },
      handleAdvSuccess1(response, file) {
        console.log("打印成功了奥");
        console.log(response);
        console.log(file);
        this.adver_img1 = response.path;
        
      },
      
      handleAdvExceed() {
        this.$message({
          message: this.$t("只能上传一张"),
          type: "warning"
        });
      },
      handleAdvExceed1() {
        this.$message({
          message: this.$t("只能上传一张"),
          type: "warning"
        });
      },
      
      examineSubmit(){
        if(this.memusid==5){
          this.examineFrom.state = 1;
        }else if(this.memusid==6){
          this.examineFrom.state = 2;
        }

        // if(this.adver_img==""){
        //   this.$message({
        //     message: this.$t("请上传图片"),
        //     type: "warning"
        //   });
        // }

        this.examineFrom.reimg = this.adver_img;
        this.examineFrom.uid = this.uid;
        util
        .$http("/finance/withdrawalreEdit", this.examineFrom)
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.showAddCab = false;
            this.getData();
            this.showExamine = false;
          }
        });
      },


      handleExamine(row) {
        this.showExamine = true;
        setTimeout(() => {
          util
            .$http("/finance/withdrawalreDetail", {
              id: row.id,
            })
            .then((res) => {
              if (res.code == 1) {
                this.examineFrom = res.data
              }
            });
        }, 150);
      },

      getData(type){
        if (type == "search") {
          this.page = 1;
          this.is_export = 0
        }
        util
        .$http("/finance/withdrawalreList?page=" + this.page, {
          page_size: this.page_size,
          uid: this.uid,
          memusid: this.memusid,
          status: this.clientVal,
          start_time: this.dates[0] || "",
          end_time: this.dates[1] || "",
        })
        .then((res) => {
          // console.log("打印一下子ok吗")
          // console.log(this.memusid);
          // console.log(this.uid);
          // console.log(this.token);
          // console.log(this.permissions);
          // console.log("打印一下返回值ok吗");
          // console.log(res);
          if (res.code == 1) {
            this.total = res.data.total;
            this.tableData = res.data.list;
            // this.withdrawal_amount = res.data.withdrawal_amount
            // this.pay_amount = res.data.pay_amount
          }else if(res.code == 301) {
            window.location.href = res.msg
          }
        });
      },
      addCabinet(){
        this.showAddCab = true;
        util
        .$http("/finance/withdrawalRemount", {
          uid: this.uid,
          memusid: this.memusid,
        })
        .then((res) => {
          // console.log("查看余额")
          // console.log(res.balance);
          this.balance = res.balance;
          // console.log("打印一下子ok吗")
          // console.log(this.memusid);
          // console.log(this.uid);
        });


      },
      handleCurrentChange(val) {
        this.page = Number(val);
        this.is_export = 0
        this.getData();
      },
      addSubmit(){
        console.log("给我打印一下detail_from");
        console.log("打印一下uid")
        console.log(this.memusid);
        console.log(this.uid);
        console.log(this.detail_from);
        this.detail_from.bills = this.adver_img1;
        if(this.memusid == 5){
          this.detail_from.state = 1;
        }else if(this.memusid == 6){
          this.detail_from.state = 2;
        }

        this.detail_from.uid = this.uid;

        util
        .$http("/finance/withdrawalAdd", this.detail_from)
        .then(res => {
          if (res.code == 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            this.showAddCab = false;
            this.getData();
          }
        });

      }

    }
}

</script>
<style scoped>
.sub_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
  margin-right: 20px;
}
.export_btn {
  width: 70px;
  height: 40px;
  border: 0;
  outline: 0;
  cursor: pointer;
  border-radius: 4px;
}
</style>